/* eslint-disable vue/max-attributes-per-line */
<template>
  <div class="complex-table">
    <el-form v-if="showSearch" ref="form" :model="from" size="small" class="filter-container">
      <el-row :gutter="24">
        <el-col v-for="(item, key) in columns" :key="key" :xs="8" :sm="8" :md="8" :lg="6" :xl="8">
          <!-- 表单枚举 input  select date-->
          <el-form-item v-if="item.search" :label="item.label + ':'">
            <el-input v-if="item.search === 'input'" v-model="from[item.prop]" />
            <el-select
              v-if="item.search === 'select'"
              v-model="from[item.prop]"
              :placeholder="`请选择${item.label}`"
              clearable
            >
              <el-option
                v-for="n in item.options"
                :key="n.value"
                :label="n.label"
                :value="n.value"
              />
            </el-select>
            <el-date-picker
              v-if="item.search === 'date'"
              v-model="from[item.prop]"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item class="form-btn">
            <el-button @click="resetFields()">重置筛选</el-button>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 表格头部切换插槽 -->
    <slot />

    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-background="rgba(255, 255, 255, 0.2)"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="selection" type="selection" width="50" align="center" />

      <el-table-column
        v-for="(item, key) in tableColumns"
        :key="key"
        :label="item.label"
        :prop="item.prop"
        :sortable="item.sortable"
        :align="item.align || 'center'"
        :min-width="item.width"
        :fixed="item.fixed"
      >
        <template slot-scope="{ row }">
          <Render v-if="item.render" :render="item.render" :row="row" />
          <span v-else>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total.sync="total"
      :page.sync="currentPage"
      :limit.sync="pageSize"
      @pagination="pagination"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Render from './render'
import { setTimeout, clearTimeout } from 'timers'

export default {
  name: 'ComplexTable',
  components: { Pagination, Render },
  props: {
    // 表格头标题
    columns: {
      required: true,
      type: Array
    },

    // 表格数据
    list: {
      required: true,
      type: Array
    },

    // 数据总条数
    total: {
      type: Number,
      default: 100
    },

    // 当前页码
    page: {
      type: Number,
      default: 1
    },

    // 每页条数
    limit: {
      type: Number,
      default: 10
    },

    // 是否多选表格
    selection: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      loading: false,
      from: {
        current: 1,
        size: 10
      }
    }
  },

  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },

    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    },

    // 是否显示筛选表单
    showSearch() {
      const { columns } = this
      if (columns.length) {
        for (let i = 0; i < columns.length; i++) {
          if (columns[i].search) {
            return true
          }
        }
      }
      return false
    },

    // 表格渲染的列
    tableColumns() {
      return this.columns.filter(item => !item.hideInTable)
    }
  },

  methods: {
    // 改变分页
    pagination(data) {
      this.loading = true
      this.$emit('pagination', data)
      const time = setTimeout(() => {
        this.loading = false
        clearTimeout(time)
      }, 1000)
    },

    // 表格查询
    onSearch() {
      this.loading = true
      this.$emit('onSearch', this.from)
      const time = setTimeout(() => {
        this.loading = false
        clearTimeout(time)
      }, 1000)
    },

    // 表格勾选
    handleSelectionChange(rows) {
      this.$emit('onSelectionChange', rows)
    },

    // 重置查询表单
    resetFields() {
      for (let key in this.from) {
        this.from[key] = undefined
      }
      this.loading = true
      this.$emit('onReset')
      const time = setTimeout(() => {
        this.loading = false
        clearTimeout(time)
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
@import './index';
</style>
